<template>
  <div>
    <el-form :rules="rules" :model="cate" label-width="120px" ref="cateAdd">
      <el-form-item label="分类名称" prop="cateName">
        <el-input v-model="cate.cateName" />
      </el-form-item>
      <el-form-item label="父级" prop="pid">
        <el-cascader v-model="cate.pid" :options="cates" :props="cascaderProps" clearable />
      </el-form-item>
      <el-form-item label="分类图标 (180*180)">
        <el-upload
          action = '/api/upload'
          name="file"
          accept="image/*,.jpg,.png,.gif"
          :on-success="uploadSuccess"
          :before-upload="beforeupload"
        >
        <img src="../../../assets/imgs/pic.png" alt="">
       </el-upload>
       <el-image  style="width: 100px" :src="cate.icon" :preview-src-list="[cate.icon]"/>
      </el-form-item>
      <el-form-item label="状态" prop="enable">
        <el-switch
            v-model="cate.enable"
            inline-prompt
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            active-text="显示"
            inactive-text="禁止"
          />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="restes">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchCates, fetchCatesUpdate, addCateUpdate } from '@/api/cateLists'
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      rules: {
        cateName: [
          {
            required: true,
            tragger: 'blur',
            message: '分类名必填'
          }
        ],
        pid: [
          {
            required: true
          }
        ]
      },
      cate: {
        cateName: '',
        enable: true,
        icon: '',
        pid: -1 // 代表父级分类的ID，-1代表没有父级分类
      },
      cates: [
        {
          cateName: '顶层分类',
          id: -1
        }
      ],
      cascaderProps: {
        emitPath: false,
        checkStrictly: true,
        value: 'id',
        label: 'cateName'
      }
    }
  },
  methods: {
    beforeupload (file) {
      if (file.size > 50 * 1024) {
        this.$message({
          type: 'error',
          message: '图片体积不能超出'
        })
        return false
      } else {
        return true
      }
    },
    uploadSuccess (res) {
      // 图片上传成功回调
      if (res.code === 200) {
        this.cate.icon = res.data.url
        this.$message({
          type: 'success',
          message: '上传成功'
        })
      }
    },
    onSubmit () {
      this.$refs.cateAdd.validate().then(() => {
        addCateUpdate(this.cate).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              duration: 1000,
              message: res.data.msg,
              onClose: () => {
                this.$router.go(0)
              }
            })
          } else {
            this.$message({
              type: 'error',
              message: res.data.data.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          duration: 1500,
          message: '表单验证失败'
        })
      })
    },
    fetchCates () {
      fetchCates().then(res => {
        if (res.data.code === 200) {
          this.cates = [
            ...this.cates,
            ...res.data.data.lists
          ]
        }
      })
    },
    restes () {
      this.$refs.cateAdd.resetFields()
    }
  },
  // 监听ID  获取商品分类详情
  watch: {
    id: {
      handler (val) {
        fetchCatesUpdate({
          id: val
        }).then(res => {
          if (res.data.code === 200) {
            this.cate = res.data.data
          }
        })
      },
      immediate: true
    }
  },
  created () {
    this.fetchCates()
  }
}
</script>

<style lang="scss" scoped>
// .imageGb{
//   width: 65px;
//   height: 65px;
// }
</style>
